import { Animated } from 'react-native';
import { Easing } from 'react-native-reanimated';

class BaseAnimation {
  constructor(start, end, duration = 300, easing = 'linear', useNativeDriver = false) {
    this.start = start;
    this.end = end;
    this.duration = duration;
    this.easing = easing;
    this.aniValue = new Animated.Value(start);
    this.status = 0;
    this.useNativeDriver = useNativeDriver;
  }

  forward = () => {
    this.status = 1;
    Animated.timing(
      this.aniValue,
      {
        toValue: this.end,
        duration: this.duration,
        easing: Easing[this.easing],
        useNativeDriver: this.useNativeDriver,
      },
    ).start();
  }

  backward = () => {
    this.status = 0;
    Animated.timing(
      this.aniValue,
      {
        toValue: this.start,
        duration: this.duration,
        easing: Easing[this.easing],
        useNativeDriver: this.useNativeDriver,
      },
    ).start();
  }

  setStart = (start) => {
    this.start = start;
    this.aniValue = new Animated.Value(start);
  }

  setEnd = (end) => {
    this.end = end;
  }
}

// shared animations
export const titleFade = new BaseAnimation(1, 0, 300, 'linear', true);
export const backButtonFade = new BaseAnimation(0, 1, 300, 'linear', true);

// generate animation sets
const aniSetGenerator = () => ({
  bottomFade: new BaseAnimation(0, 1, 300, 'linear', true),
  cardFade: new BaseAnimation(1, 0, 300, 'linear', true),
});

export const firstCardAni = aniSetGenerator();
export const secondCardAni = aniSetGenerator();
export const thirdCardAni = aniSetGenerator();

export const aniSets = [firstCardAni, secondCardAni, thirdCardAni];
const aniGen = (ani) => {
  if (!ani.status) {
    ani.forward();
  } else {
    ani.backward();
  }
};
export const selectCardAni = (index) => {
  aniGen(titleFade);
  aniGen(backButtonFade);
  aniSets.forEach((set, arrIndex) => {
    if (index === arrIndex) {
      aniGen(set.bottomFade);
    } else {
      aniGen(set.cardFade);
    }
  });
};
